<template>
    <div class="h-full flex-col">

        <SearchForm @handle-reset="resetParams" @handle-search="getList" v-if="false">
            <template #header>
                <el-button @click="cretedLink">创建链接</el-button>
            </template>
            <el-form :model="searchForm" inline>
                <el-form-item>
                    <el-input v-model="searchForm._id" clearable @change="getList" class="w-220px" placeholder="链接ID" />
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.status" placeholder="状态" clearable @change="getList" class="w-220px">
                        <el-option label="启用" :value="1" />
                        <el-option label="禁用" :value="0" />
                    </el-select>
                </el-form-item>
            </el-form>
        </SearchForm>

        <div class="page-card h-full" v-loading="loading">
            <el-form inline>
                <el-form-item>
                    <el-button type="default" @click="cretedLink()">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData">
                <!--                <el-table-column label="_id" prop="_id" align="center" width="230" />-->
                <el-table-column label="标题" prop="name" align="center" />
                <el-table-column label="类型" prop="type" :formatter="item => typeMap.get(item.type)" align="center" />
                <el-table-column label="排序" prop="sort" align="center" />
                <el-table-column label="金额" prop="price" align="center" />
                <el-table-column label="划线价格" prop="lineprice" align="center" />
                <el-table-column label="时长" prop="timenum" align="center">
                    <template #default="{ row }">
                        {{ row.timenum }} {{ row.selectTiemtype == '1' ? '天' : row.selectTiemtype == '2' ? '月' : '年' }}
                    </template>
                </el-table-column>

                <el-table-column label="本积分" prop="integral" align="center" />
                <el-table-column label="赠送积分" prop="giveintegral" align="center" />

                <el-table-column label="总积分" align="center">
                    <template #default="{ row }">
                        {{ row.integral + row.giveintegral }}
                    </template>
                </el-table-column>

                <el-table-column label="状态" align="center">
                    <template #default="{ row }">
                        {{ row.status == '1' ? '启用' : '禁用' }}
                    </template>
                </el-table-column>
                <el-table-column label="销量" prop="sales" align="center" />
                <el-table-column label="库存" prop="stock" align="center" />
                <el-table-column label="创建时间" prop="createTime" align="center" />
                <el-table-column label="操作" width="160" align="center">
                    <template #default="scope">
                        <el-button type="primary" link @click="upDataConter(scope.row)">编辑</el-button>
                        <el-button type="danger" link @click="onDelete(scope.row._id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :pageable="page" :handleSizeChange="handleSizeChange"
                :handleCurrentChange="handleCurrentChange" />
            <el-dialog v-model="createdUserLinkStatus" title="价格配置" width="30%" @closed="clearAddModel">
                <el-form :model="addusertagdata" label-width="70px" @submit.prevent>
                    <el-form-item label="类型">
                        <el-select style="width: 70%;" v-model="addusertagdata.type">
                            <el-option v-for="[key, value] of typeMap.entries()" :value="key" :label="value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题">
                        <el-input v-model="addusertagdata.name" style="width: 70%;" type="text" placeholder="请输入标题" />
                    </el-form-item>
                    <el-form-item label="金额">
                        <el-input type="number" min="0.01" max="99999999" v-model="addusertagdata.price"
                            style="width: 70%;" placeholder="请输入金额" />
                    </el-form-item>
                    <el-form-item label="划线金额">
                        <el-input type="number" min="0.01" max="99999999" v-model="addusertagdata.lineprice"
                            style="width: 70%;" placeholder="请输入金额" />
                    </el-form-item>
                    <el-form-item label="时长">
                        <el-input v-model="addusertagdata.timenum" style="max-width: 600px" placeholder="时长"
                            class="input-with-select">

                            <template #append>
                                <el-select v-model="addusertagdata.selectTiemtype" placeholder="单位"
                                    style="width: 115px">
                                    <el-option label="天" value="1" />
                                    <el-option label="月" value="2" />
                                    <el-option label="年" value="3" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="本积分">
                        <el-input type="number" min="1" max="99999999" v-model="addusertagdata.integral"
                            style="width: 70%;" placeholder="请输入本积分" />
                    </el-form-item>
                    <el-form-item label="赠送积分">
                        <el-input type="number" min="1" max="99999999" v-model="addusertagdata.giveintegral"
                            style="width: 70%;" placeholder="请输入赠送积分" />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch v-model="addusertagdata.status"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="开启"
                            inactive-text="关闭" />
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input type="number" min="0" max="99999999" v-model="addusertagdata.sort" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="addusertagdata.detail" style="width: 70%;"
                            placeholder="请输入赠送积分" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="onSubmit">确认</el-button>
                        <el-button @click="clearAddModel">取消</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { getAiPayConfigApi, deleteAiPaApi, createAiPayApi, editAiPayApi } from '@/api/aliPay';

const typeMap = new Map([
    ['ai', 'ai积分(绑定用户)'],
    ['jiance', '检测积分(绑定店铺)'],
    ['qianchuanQY', '千川全域']
])

interface addusertagdataType {
    _id?: string;
    status: string | number | boolean;
    name: string;
    price: string | number;
    integral: string | number;
    giveintegral: string | number;
    detail: string;
}

const infoData: any = {
    _id: '',
    type: '',
    name: '',
    price: '',
    integral: '',
    giveintegral: '',
    status: true,
    detail: '',
    selectTiemtype: '1',
    timenum: '',
    lineprice: '',
    sort: ''
}
let addusertagdata: any = reactive<addusertagdataType>(JSON.parse(JSON.stringify(infoData)))
const createdUserLinkStatus = ref(false);

interface searchFormType {
    status: string | number;
    _id: any;
}
const searchForm = reactive<searchFormType>({
    status: '',
    type: 'all',
    _id: ''
});

const { tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange } =
    useTable({
        apiFn: getAiPayConfigApi,
        params: searchForm,
        // callback
    });

const onDelete = (id: string) => {
    ElMessageBox.confirm('删除价格配置后前端不再可用该配置！', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            deleteAiPaApi(id).then(res => {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                });
                getList();
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作'
            });
        });
};
const cretedLink = () => {
    createdUserLinkStatus.value = true;
    // alert('创建链接')
    // console.log('cretedLink');

}
const onSubmit = () => {
    addusertagdata.status = addusertagdata.status ? '1' : '0'
    if (addusertagdata._id) {
        console.log('编辑')
        editAiPayApi(addusertagdata, addusertagdata._id).then(res => {
            console.log('cretedLink', res);
            ElMessage({
                type: 'success',
                message: '编辑成功'
            });
            clearAddModel()
            // getList();
        })
        return
    }
    createAiPayApi(addusertagdata).then(res => {
        console.log('cretedLink', res);
        ElMessage({
            type: 'success',
            message: '创建成功'
        });
        clearAddModel()
    })
}
const clearAddModel = () => {
    createdUserLinkStatus.value = false;
    Object.keys(infoData).forEach((key: string) => {
        addusertagdata[key] = infoData[key]

    })
    getList();


}
const upDataConter = (data: any) => {
    console.log('data', data._id)
    createdUserLinkStatus.value = true
    Object.keys(infoData).forEach((key: string) => {
        addusertagdata[key] = data[key]
        if (key == 'status') {
            addusertagdata[key] = data[key] === '1' ? true : false
        }
    })
    // addusertagdata = {
    //     _id: data._id,
    //     name: data.name,
    //     price: data.price,
    //     integral: data.integral,
    //     giveintegral: data.giveintegral,
    //     status: data.status === '1' ? true : false,
    //     detail: data.detail
    // }


}
</script>

<style lang="scss" scoped></style>
